<template>
    <div class="page">
        <div>
            <!-- 顶部轮播图 -->
            <div class="relative">
                <swiper 
                    loop auto 
                    :list="swiperList" 
                    :index="swiperIndex" 
                    @on-index-change="swiperChange" 
                    :show-dots='false' @click.native="clickImg"
                    :aspect-ratio="0.75"
                    :show-desc-mask="false"
                ></swiper>
                <span class="absolute b90 r30 pt3 pb3 pl10 pr10 br10 pagetion">{{indexImg}}</span>
            </div>
            <!-- 商品信息 -->
            <div class="skuInfo whiteBg pt15 pb15 pl15 pr15 br10 relative borderbox">
                <div class="textL fs18 blod h16">
                    <p class="fs16 bold">{{(proName || '--')}}</p>
                </div>
                <div class="flex flexSpace h46 vux-1px-b">
                    <span class="price fs18">￥ {{salePrice || 0}}</span>
                    <span class="guaryPrice fs12">快递：{{freight || 0}}元</span>
                </div>
                <!-- 优惠券信息 -->
                <discountInfo v-if="productCoupons.length != 0" :coupons="productCoupons"></discountInfo>
            </div>
            <!-- 选择规格信息 -->
            <check-format 
                v-if="productSpecList.length != 0" 
                :productSpec="productSpecList"
                :proId="proId"
                :proName="proName"
                :proImg='swiperList[0]'
            ></check-format>
            <div class="flex row flexCenter h30 detail relative">
                <p class="absolute"></p>
                <div class="relative flex flexCenter pl10 pr10">
                    <img src="../../../images/Group 38.png" alt="">
                    <span class="fs16 ml10">详情</span>
                </div>
            </div>

            <!-- 详情列表 -->
            <div class="detailList whiteBg textL vHtmlImgBlock lh18" v-html="productDetails"></div>
            <div class="h50 mb10"></div>
            <div class="navigation vux-1px-t flex flexCenter whiteBg">
                <span @click="toNext('')">
                    <img src="./../../../images/home2.png" class="w16 h16" alt="">
                    <span class="fs12">首页</span>
                </span>
                <span @click="toNext('shopcart')">
                    <img src="./../../../images/cart.png" class="w116 h16" alt="">
                    <span class="fs12">购物车</span>
                </span>
                <div class="flex flexCenter">
                    <span :class="['fs14','pt8','pb8','pl14','pr14','whiteText','btlr16','bblr16',!productStockStatus?'garys':'']" @click="addShopCart">加入购物车</span>
                    <span :class="['fs14','pt8','pb8','pl14','pr14','whiteText','btrr16','bbrr16',!productStockStatus?'garys':'']" @click="payMoney">立即购买</span>
                </div>
            </div>
        </div>
        <!-- 是否注册弹窗 -->
        <reg-phone :isShow="showPopup" @cancel="cancel" @confirm="confirmCB"></reg-phone>
    </div>
</template>
<script>
import { Swiper,Popup } from 'vux';
import { MessageBox, Toast } from "mint-ui";
import discountInfo from './discountInfo.vue';
import checkFormat from './checkFormat.vue';
import mixins from 'mixins';
import {
    myProductVouchers,
    getCoupon,
    myProductCoupon,
    getProductDetails,
    createOrder,
    integralExchangeProduct,
    queryProductSpec,
    Shopset,
    queryProductSpecByPrice,
    isRegister,
} from "request";
export default {
    name:'categoryDetail',
    mixins: [mixins],
    components:{
        Swiper, discountInfo, checkFormat,Popup
    },
    data(){
        return {
            swiperList:[],
            swiperIndex: 0,
            swiperItemIndex: 1,
            showDiscount:false,             //显示优惠券列表

            proName:'',                     //商品名称
            salePrice:'',                   //商品价格
            bazaarPrice:0,                  //快递价格
            productDetails:'',              //商品详情html片段
            productCoupons:[],              //商品优惠券列表
            productSpecList:[],             //商品规格信息
            proId:'',                       //商品id
            Integral:'',
            productType:'',
            freight:'',
            proNum:1,                       //默认购买数量
            specString:'',                  //默认商品规格
            showPopup:false,                //是否显示页面弹窗
            isRegPhone:false,               //是否注册手机号
            productStockStatus:true,                    //当前商品库存
        }
    },
    computed:{
        indexImg(){
            return (this.swiperIndex + 1) + '/' + (this.swiperList.length || 1);
        },
        cateNo(){
            return this.$route.query.cateNo || '';
        }
    },
    created(){
        this.getprodetail();
        //验证手机号是否注册
        isRegister({}).then(res => {
            if (res.data.result == "7012") {
                this.isRegPhone = false;
            }else{
                this.isRegPhone = true;
            }
        }).catch( err=> console.log(err) )
    },
    methods:{
        //获取商品详情信息
        getprodetail(){
            if(!this.cateNo){
                Toast({ message: "商品参数缺失",position: "middle",duration: 1000});
                this.$router.go(-1);
            }
            this.$vux.loading.show({ text:'loading' });
            getProductDetails({ productNo: this.cateNo }).then(res=>{
                this.$vux.loading.hide();
                if(res.rspCode == '0000'){
                    let data = res.data;
                    //获取规格信息
                    this.querySpect(data.id);
                    this.proId = data.id;
                    this.proName = data.productName;
                    this.productType = data.productType;
                    this.freight = data.freight;
                    this.productStockStatus = data.productStockStatus == '1' ? true : false;
                    this.salePrice = data.salePrice;
                    this.bazaarPrice = data.bazaarPrice;
                    this.productDetails = data.productDetails;
                    this.swiperList = data.productBannerList.map(item=>{
                        item.img = this.imgUrl + item.picUrl;
                        return item;
                    });
                    this.swiperList.length == 0 && (this.swiperList = [{img: require("../../../assets/nofound.jpg")}]);
                    this.productCoupons = (data.productCoupons[0] && data.productCoupons[0]['couponList']) || [];
                }
            }).catch(err=>{
                this.$vux.loading.hide();
                console.log(err)
            })
        },
        // 下一页用值
        setres() {
            var addshops = {};
            //设置确认订单值，存入缓存
            var addshops = {
                salePrice: this.salePrice,
                Integral: this.Integral,
                productNo: this.cateNo,
                productName: this.proName,
                productType: this.productType,
                freight: this.freight,
                number: this.proNum,
                specList: this.speclist,
                specString: this.specString,
                productCoupons:this.productCoupons,
                imgUrl:this.swiperList[0].img
            };
            this.$store.commit("resetaddress", addshops);
            this.$store.commit('setGoodsInfo', [addshops]);
        },
        //查询商品规格
        querySpect(id){
            this.$vux.loading.show({text:'loading'});
            queryProductSpec({ productId: id }).then(res=>{
                this.$vux.loading.hide();
                if(res.rspCode == '0000'){
                    this.productSpecList = res.data.productSpecList || [];
                }
            }).catch(err => this.$vux.loading.hide())
        },
        swiperChange(index) {
            this.swiperIndex = index;
        },
        //立即购买
        payMoney(){
            if(!this.productStockStatus){
                return;
            }
            this.setres();
            this.$store.commit("cateNo", this.cateNo);
            this.$router.push({
                path: "/goodsResult",
                query:{
                    cateNo:this.cateNo,
                    types:'00'
                }
            });
        },
        //加入购物车
        addShopCart(){
            // this.$vux.loading.show({text:'loading'});
            if(!this.isRegPhone){
                this.showPopup = true;
                Toast({ message:'请先绑定手机号',position:'middle',duration:1000 });
                return;
            }else if(!this.productStockStatus){
                return
            }
            let params = {
                productNo:this.cateNo,
                isAdd:'01',
                buynum:this.proNum,
                specIds:this.getPriceStr,
                selectBox:'true',
            }
            Shopset(params).then(res=>{
                if(res.rspCode == '0000' && res.data.code == '0000'){
                    this.$Toast()
                    this.show = false;
                }else{
                    Toast({ message:'添加购物车失败',position:'middle',duration:1500});
                }
            }).catch(err => console.log(err))
        },
        //点击滚动图片回调
        clickImg(){
            console.log(this.swiperIndex)
            console.log(this.swiperList[this.swiperIndex])
        },
        //弹窗取消回调
        cancel(){
            this.showPopup = false;
            this.isRegPhone = false;
        },
        //弹窗确定回调
        confirmCB(){
            this.showPopup = false;
            this.isRegPhone = true;
        }
    }
}
</script>
<style lang="less" scoped>
@import "~src/components/css/gloState.less";
@import "../../css/ckecked.css";
@import "./index.less";
</style>
